<template>
  <div style="padding: 0 20px">
    <el-form :model="formInline" class="demo-form-inline">
      <h3> 营销目标与场景：</h3>
      <el-card>
        <!--        <el-form-item label="推广目的：">-->
        <!--          <div class="tgmd_main ">-->
        <!--            <div class="tabhover" v-for="(item,index) in tuiguanglist" @click="tgmdTabClick(item)">-->
        <!--              <span :class="item.id==tgmdActiveId?'tgmd_main_hover':''">{{ item.name }}</span>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </el-form-item>-->

        <el-form-item label="推广目的：">
          <div class="pub_display tflx">
            <div class="tflx_list" v-for="(item,index) in tuiguanglist" @click="tgmdTabClick(item)">
              <!--            <span :style="item.id==gglxActiveId?'color:red':''">{{ item.name }}</span>-->
              <div :style="item.id==tgmdActiveId?'color:#2a55e5':''">
                <div style="font-weight: bold">{{ item.name }}</div>
                <div>{{ item.des }}</div>
              </div>

            </div>
          </div>
        </el-form-item>

        <el-form-item label="投放模式：" v-show="formInline.landing_type=='LINK' || formInline.landing_type=='SHOP'">

          <el-radio @input="inputChange" v-model="formInline.delivery_mode" label="MANUAL">手动投放</el-radio>
          <el-radio @input="inputChange" v-model="formInline.delivery_mode" label="PROCEDURAL">自动投放</el-radio>
        </el-form-item>
      </el-card>
      <el-card v-show="formInline.landing_type=='APP'">
        <el-form-item v-model="formInline.app_promotion_type">
          <div class="tab_main">
            <div class="tabhover" v-for="(item,index) in downloadWay" @click="tabClick(item)">
              <span :style="item.id==downloadActiveId?'color:#2a55e5':''">{{ item.name }}</span>
            </div>
          </div>
          <el-tag size="mini">{{ downloadDes }}</el-tag>
        </el-form-item>
      </el-card>
      <el-card>
        <!--      营销场景-->
        <el-form-item label="营销场景：">
          <div style="display: flex">
            <div class="yxcj">短视频+图文</div>
            <div class="yxcj yxcj-disabled">直播</div>
          </div>
        </el-form-item>
      </el-card>
      <el-card>
        <!--      广告类型-->
        <el-form-item label="广告类型：">
          <div class="pub_display gglx">
            <div class="tabhover" v-for="(item,index) in gglx" @click="gglxTabClick(item)">
              <span :style="item.id==gglxActiveId?'color:#2a55e5':''">{{ item.name }}</span>
            </div>
          </div>
        </el-form-item>
        <!--      投放类型-->
        <el-form-item label="投放类型：" v-show="formInline.ad_type=='SEARCH'">
          <div class="pub_display tflx">
            <div class="tflx_list" v-for="(item,index) in tflx" @click="tflxTabClick(item)">
              <!--            <span :style="item.id==gglxActiveId?'color:red':''">{{ item.name }}</span>-->
              <div :style="item.id==tflxActiveId?'color:#2a55e5':''">
                <div style="font-weight: bold">{{ item.name }}</div>
                <div>{{ item.des }}</div>
              </div>

            </div>
          </div>
        </el-form-item>
      </el-card>
      <h3>关联产品投放:</h3>
      <el-card>
        <el-form-item label="关联产品：">
          <div class="pub_display gglx">
            <div class="tabhover" v-for="(item,index) in glcp" @click="glcpTabClick(item)">
              <span :style="item.id==glcpActiveId?'color:#2a55e5':''">{{ item.name }}</span>
            </div>
          </div>
          <!--         <div class="select_product" v-show="formInline.product_setting=='SINGLE'" @click="selectProduct">+点击选择产品</div>-->
          <div v-show="formInline.product_setting=='SINGLE'">

            <el-tag>产品列表如下，点击选择： <span>已选择0/1</span></el-tag>
            <el-form class="cptf_form">
              <div class="block">
                <el-cascader
                  placeholder="类目："
                  :options="options"
                  filterable :show-all-levels="false"
                ></el-cascader>
              </div>
              <el-input placeholder="请输入产品名称或ID" v-model="formInline.product_setting" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form>
            <el-table
              :data="tableData"
              style="width: 100%"
              @row-click="singleElection"
              highlight-current-row
            >
              <el-table-column align="center" label="选择">
                <template slot-scope="scope">
                  <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                  <el-radio class="radio" v-model="templateSelection" :label="scope.row.id"
                  >&nbsp;
                  </el-radio
                  >
                </template>
              </el-table-column>
              <el-table-column align="center" prop="id" label="编号"></el-table-column>
              <el-table-column align="center" prop="date" label="日期"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
              <el-table-column align="center" prop="address" label="地址"></el-table-column>
            </el-table>
            <div style="display: flex;justify-content: space-between;margin-top: 20px">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
              >
              </el-pagination>
              <el-form-item>
                <el-button type="primary" @click="">确定</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
      </el-card>
      <h3>投放内容与目标</h3>
      <el-card>
        <!--  销售线索        -->

        <el-form-item label="投放内容:" v-show="formInline.landing_type=='LINK'">
          <div class="pub_display gglx">
            <div class="tabhover" v-for="(item,index) in tfnr" @click="fgnrTabClick(item)"
                 v-show="formInline.landing_type=='LINK' && (item.value=='ORANGE' || item.value=='THIRDPARTY' || item.value=='AWEME' || item.value=='MICRO_APP')">
              <span
                :style="item.id==tfnrActiveId?'width:76px;color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
            </div>
          </div>
        </el-form-item>
        <!--        电商-->
        <el-form-item label="投放内容:" v-show="formInline.landing_type=='SHOP'">
          <div class="pub_display gglx">
            <div class="tabhover" v-for="(item,index) in tfnr" @click="fgnrTabClick(item)"
                 v-show="formInline.landing_type=='SHOP' && (item.value=='ORANGE' || item.value=='THIRDPARTY' || item.value=='WECHAT_APPLET' || item.value=='MICRO_APP')">
              <span
                :style="item.id==tfnrActiveId?'width:76px;color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
            </div>
          </div>
        </el-form-item>
        <!--        原生互动-->
        <el-form-item label="投放内容:" v-show="formInline.landing_type=='NATIVE_ACTION'">
          <div class="pub_display gglx">
            <div class="tabhover" v-for="(item,index) in ystfnr" @click="ystfnrTabClick(item)">
              <span
                :style="item.id==ystfnrActiveId?'width:76px;color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
            </div>
          </div>
        </el-form-item>
        <!--      下载方式-->
        <div v-show="formInline.landing_type=='APP'">
          <el-form-item label="应用·">
            <div>
              <el-input placeholder="请输入应用下载链接或选择已有应用" v-model="formInline.product_setting"
                        class="input-with-select"
              >
                <el-button slot="append" @click="selectYingyong">选择</el-button>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="下载方式：">
            <div class="pub_display gglx">
              <div class="tabhover" v-for="(item,index) in xzfs" @click="xzfsTabClick(item)">
                <span :style="item.id==xzfsActiveId?'color:#2a55e5':''">{{ item.name }}</span>
              </div>
            </div>
          </el-form-item>
          <!--        数据对接方式-->
          <el-form-item label="数据对接方式：">
            <div class="pub_display gglx">
              <div class="tabhover" v-for="(item,index) in sjdjfs" @click="sjdjfsTabClick(item)">
                <span :style="item.id==sjdjfsActiveId?'color:#2a55e5':''">{{ item.name }}</span>
              </div>
            </div>
          </el-form-item>
        </div>
        <div v-show="tfnrActiveId==1">
          <!--自研落地页事件资产-->
          <el-form-item label="自研落地页事件资产：">
            <div class="pub_display gglx">
              <!--            <div class="tabhover" v-for="(item,index) in sjdjfs" @click="sjdjfsTabClick(item)">-->
              <!--              <span :style="item.id==sjdjfsActiveId?'color:#2a55e5':''">{{ item.name }}</span>-->
              <!--            </div>-->
              <el-select v-model="formInline.optimize_goal" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>

        </div>
        <div v-show="tfnrActiveId==4">
          <!--自研落地页事件资产-->
          <el-form-item label="字节小程序：">
            <div class="pub_display gglx">
              <!--            <div class="tabhover" v-for="(item,index) in sjdjfs" @click="sjdjfsTabClick(item)">-->
              <!--              <span :style="item.id==sjdjfsActiveId?'color:#2a55e5':''">{{ item.name }}</span>-->
              <!--            </div>-->
              <el-select v-model="formInline.optimize_goal" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="事件资产：">
            <div class="pub_display gglx">
              <!--            <div class="tabhover" v-for="(item,index) in sjdjfs" @click="sjdjfsTabClick(item)">-->
              <!--              <span :style="item.id==sjdjfsActiveId?'color:#2a55e5':''">{{ item.name }}</span>-->
              <!--            </div>-->
              <el-select v-model="formInline.optimize_goal" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="备用事件资产：">
            <div class="pub_display gglx">
              <!--            <div class="tabhover" v-for="(item,index) in sjdjfs" @click="sjdjfsTabClick(item)">-->
              <!--              <span :style="item.id==sjdjfsActiveId?'color:#2a55e5':''">{{ item.name }}</span>-->
              <!--            </div>-->
              <el-select v-model="formInline.optimize_goal" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>

        </div>
        <!--        优化目标-->
        <el-form-item label="优化目标：">
          <div class="pub_display gglx">
            <!--            <div class="tabhover" v-for="(item,index) in sjdjfs" @click="sjdjfsTabClick(item)">-->
            <!--              <span :style="item.id==sjdjfsActiveId?'color:#2a55e5':''">{{ item.name }}</span>-->
            <!--            </div>-->
            <el-select v-model="formInline.optimize_goal" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>

      </el-card>
      <!--        投放版位-->
      <h3>投放版位</h3>
      <el-card style="margin-top: 20px">

        <el-form-item label="投放位置:">
          <div class="pub_display gglx">
            <div class="tabhover" v-for="(item,index) in tfbw" @click="tfbwTabClick(item)">
              <span
                :style="item.id==tfbwActiveId?'width:76px;color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
            </div>
          </div>
          <el-tag>{{ tfbw[tfbwActiveId].des }}</el-tag>
          <el-card class="box-card" v-show="formInline.delivery_range.inventory_catalog=='MANUAL'">
            <div slot="header" class="clearfix">
              <span>媒体选择</span>
              <span v-show="formInline.delivery_range.inventory_type.length==0" style="margin-left: 20px;color: red">*请选择广告位</span>
            </div>
            <div>
              <el-table
                ref="myTable"
                :data="mtxzTable"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  type="selection"
                  width="55"
                >
                </el-table-column>

                <el-table-column
                  prop="name"
                  label="媒体名称"
                  width=""
                >
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-form-item>

      </el-card>
      <h3>用户定向</h3>
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="新建定向" name="first">
            <el-form-item label="地域:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in dy" @click="dyTabClick(item)">
              <span
                :style="item.id==dyActiveId?'width:76px;color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                </div>
              </div>
              <div v-show="dyActiveId==1">
                <el-tabs v-model="dyActiveName">
                  <el-tab-pane label="地理划分" name="first">
                    <kr-cascader
                      :dataObj="dataObj"
                      :selectedData="selectedData" @onChange="selectValue"
                    ></kr-cascader>
                  </el-tab-pane>
                  <el-tab-pane label="发展划分" name="second">
                    <kr-cascader
                      :dataObj="dataObj"
                      :selectedData="selectedData" @onChange="selectValue"
                    ></kr-cascader>
                  </el-tab-pane>
                  <el-radio-group v-model="formInline.location_type" @input="diyuRadio">
                    <el-radio label="CURRENT">正在该地区的用户</el-radio>
                    <el-radio label="HOME">居住在该地区的用户</el-radio>
                    <el-radio label="TRAVEL">到该地区旅行的用户</el-radio>
                    <el-radio label="ALL">该地区内的所有用户</el-radio>
                  </el-radio-group>
                </el-tabs>

              </div>
            </el-form-item>
            <el-form-item label="性别:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in xb" @click="xbTabClick(item)">
              <span
                :style="item.id==xbActiveId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="年龄:">
              <div class="nl_display gglx">
                <span class="kuang" @click="nlNone(0)">不限</span>
                <el-checkbox-group v-model="formInline.audience.age" @change="nlTabClick">
                  <el-checkbox @change="nlClick(city)" v-for="city in nl" :label="city.value" :key="city.id">{{
                      city.name
                    }}
                  </el-checkbox>
                </el-checkbox-group>
                <span class="kuang" @click="nlNone(1)">更多分段</span>
              </div>
              <el-card class="box-card" v-show="isShowAge">
                <div slot="header" class="clearfix">
                  <span>年龄选择:</span>
                  <span class="m-10" v-if="formInline.audience.age.length==0"
                        style="margin-left: 20px;color: red"
                  >*请选择年龄段
                  </span>
                  <block v-else>
                    <span class="m-10" v-for="item in formInline.audience.age">{{ item.name }}</span>

                  </block>
                </div>
                <div>
                  <el-table
                    ref="multipleTable"
                    :data="nlMore"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="nlMoreSelectionChange"
                  >
                    <el-table-column
                      type="selection"
                      width="55"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="name"
                      label="年龄段"
                      width=""
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-form-item>
            <el-form-item label="自定义人群:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in zdyrq" @click="zdyrqTabClick(item)">
                  <span :style="item.id==zdyrqActiveId?'color:#2a55e5':''">{{ item.name }}</span>
                </div>
              </div>
              <el-card class="box-card" v-show="zdyrqActiveName=='CUSTOM'">
                <div style="display: flex">
                  <div style="width: 50%;margin-right: 20px">
                    <el-table
                      ref="filterTable"
                      :data="zdyrqList"
                      width="500"
                    >
                      <el-table-column
                        prop="name"
                        label="人群包"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        :filters="[{text: '全部', value: '2016-05-01'}, {text: '自定义', value: '2016-05-02'}, {text: '系统推荐', value: '2016-05-03'}, {text: '第三方', value: '2016-05-04'}]"
                        :filter-method="filterHandler"
                        label="属性"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="创建时间"
                        sortable
                        column-key="date"

                      >
                      </el-table-column>
                      <el-table-column
                        prop="tag"
                        label="标签"
                      >
                        <template slot-scope="scope">
                          <el-button @click="handleClick(scope.row)" type="text" size="small">定向</el-button>
                          <el-button type="text" size="small">排除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>

                  <el-card class="box-card card-w-3">
                    <div slot="header" class="clearfix">
                      <span>已选</span>
                    </div>
                    <div class="text item">
                      <el-tabs v-model="zdyActiveName" @tab-click="zdyActieClick">
                        <el-tab-pane label="定向" name="first">定向</el-tab-pane>
                        <el-tab-pane label="排除" name="second">排除</el-tab-pane>
                      </el-tabs>
                    </div>
                  </el-card>
                </div>
              </el-card>
            </el-form-item>
            <el-form-item label="行为兴趣:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in xwxq" @click="xwxqTabClick(item)">
              <span
                :style="item.id==xwxqActiveId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                </div>
              </div>
            </el-form-item>
            <div v-show="formInline.audience.interest_action_mode=='CUSTOM'">
              <el-form-item label="行为:">
                选择用户
                <el-select v-model="formInline.geolocation.action_days" placeholder="请选择">
                  <el-option
                    v-for="item in xwsjd"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                内发生的行为
              </el-form-item>
              <el-form-item label="兴趣:">

              </el-form-item>
            </div>
            <el-form-item label="抖音达人:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in dydr" @click="xbTabClick(item)">
              <span
                :style="item.id==dydrActivedId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                </div>
              </div>
            </el-form-item>
            <!--      平台-->
            <el-form-item label="平台：">
              <div style="display: flex">
                <div class="yxcj yxcj-disabled">不限</div>
                <div class="yxcj yxcj-disabled">ios</div>
                <div class="yxcj yxcj-disabled">Android</div>
              </div>
            </el-form-item>
            <el-form-item label="设备类型:">
              <div class="nl_display gglx">
                <span class="kuang" @click="shlxNone(0)">不限</span>
                <el-checkbox-group v-model="formInline.audience.device_type" @change="sblxTabClick">
                  <el-checkbox v-for="city in sblx" :label="city.value" :key="city.id">{{
                      city.name
                    }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>

            </el-form-item>
            <el-form-item label="网络:">
              <div class="nl_display gglx">
                <span class="kuang" @click="wlNone(0)">不限</span>
                <el-checkbox-group v-model="formInline.audience.ac" @change="wlTabClick">
                  <el-checkbox @change="nlClick(city)" v-for="city in wl" :label="city.value" :key="city.id">{{
                      city.name
                    }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>

            </el-form-item>
            <!--      已安装用户-->
            <el-form-item label="已安装用户：">
              <div style="display: flex">
                <div class="yxcj yxcj-disabled" style="color: rgb(42, 85, 229);border: 1px solid">不限</div>
                <div class="yxcj yxcj-disabled">过滤</div>
                <div class="yxcj yxcj-disabled">定向</div>
              </div>
            </el-form-item>
            <el-form-item label="过滤高活跃用户:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in glghyyh" @click="glghyyhTabClick(item)">
              <span
                :style="item.id==glghyyhActiveId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="过滤高关注用户:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in glggzyh" @click="glggzyhTabClick(item)">
              <span
                :style="item.id==glggzyhActiveId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="过滤已转化用户:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in glyzhyh" @click="glyzhyhTabClick(item)">
              <span
                :style="item.id==glyzhyhActiveId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="手机品牌:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in sjppTab" @click="sjppTabClick(item)">
                  <span :style="item.id==sjppActiveId?'color:#2a55e5':''">{{ item.name }}</span>
                </div>
              </div>
              <el-card class="box-card" v-show="sjppActiveName=='CUSTOM'">
                <el-transfer v-model="formInline.audience.device_brand" :titles="['手机品牌', '已选']" :data="sjpp"
                             @change="rightCheckChange"
                ></el-transfer>
              </el-card>
            </el-form-item>
            <el-form-item label="手机价格:">
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in sjjgqh" @click="sjjgTabClick(item)">
                  <span :style="item.id==sjjgActiveId?'color:#2a55e5':''">{{ item.name }}</span>
                </div>
              </div>
              <el-card class="box-card" v-show="sjjgActiveName=='CUSTOM'">
                <div class="block">
                  <el-slider
                    v-model="formInline.audience.launch_price" @input="sliderVlaue"
                    range
                    :step="500"
                    :show-stops="true"
                    :marks="marks"
                    :max="11000"
                  >
                  </el-slider>
                  <div style="margin-top: 20px">
                    <el-tag>价格区间：{{ formInline.audience.launch_price }}</el-tag>
                  </div>
                </div>
              </el-card>
            </el-form-item>
            <el-form-item
              v-show="formInline.geolocation.hide_if_converted=='CUSTOMER' || formInline.geolocation.hide_if_converted=='ORGANIZATION'"
              label="过滤时间:"
            >
              <div class="pub_display gglx">
                <div class="tabhover" v-for="(item,index) in glsj" @click="glsjTabClick(item)">
              <span
                :style="item.id==glsjActiveId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                </div>
              </div>
            </el-form-item>
            <el-button type="text" @click="dxbdialogFormVisible = true">保存为定向包</el-button>
            <div>
              <h3>排期与预算</h3>
              <el-card>
                <el-form-item label="投放时间:">
                  <div class="pub_display gglx">
                    <div class="tabhover" v-for="(item,index) in tfsj" @click="tfsjTabClick(item)">
                      <span :style="item.id==tfsjActiveId?'color:#2a55e5':''">{{ item.name }}</span>
                    </div>
                  </div>
                  <el-card class="box-card" v-show="tfsjActiveName=='SCHEDULE_START_END'">
                    <el-date-picker @change="changePicker"
                                    v-model="tfTime"
                                    type="daterange"
                                    range-separator="至"
                                    format="yyyy - MM - dd "
                                    value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </el-card>
                </el-form-item>
                <el-form-item label="投放时段:">
                  <div class="pub_display gglx">
                    <div class="tabhover" v-for="(item,index) in tfsd" @click="tfsdTabClick(item)">
                      <span :style="item.id==tfsdActiveId?'color:#2a55e5':''">{{ item.name }}</span>
                    </div>
                  </div>
                  <el-card class="box-card" v-show="tfsdActiveName=='SECOND'">9999
<!--                    <div class="byted-weektime" @mousedown="dian" @mousemove="yi" @mouseup="li">-->
<!--                      <div class="calendar">-->
<!--                        <table class="calendar-table" style="width:610px">-->
<!--                          <thead class="calendar-head">-->
<!--                          <tr>-->
<!--                            <th rowspan="6" class="week-td">星期/时间</th>-->
<!--                            <th colspan="24">00:00 - 12:00</th>-->
<!--                            <th colspan="24">12:00 - 24:00</th>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td colspan="2" v-for="(item,index) in tableHeader" :key="index">{{ item }}</td>-->
<!--                          </tr>-->
<!--                          </thead>-->
<!--                          <tbody id="tableBody">-->
<!--                          <div-->
<!--                            id="kuang"-->
<!--                            :style="{width:kuangObj.width+'px',height:kuangObj.height+'px',top:kuangObj.top+'px',left:kuangObj.left+'px',bottom:kuangObj.bottom+'px',right:kuangObj.right+'px'}"-->
<!--                          ></div>-->
<!--                          <tr>-->
<!--                            <td>星期一</td>-->
<!--                            <td-->
<!--                              @mousedown.prevent="handleMouseDown(i,0)"-->
<!--                              @mouseup.prevent="handleMouseUp(i,0)"-->
<!--                              class="calendar-atom-time"-->
<!--                              :class="item.class"-->
<!--                              v-for="(item,i) in rowUnit[0]"-->
<!--                              :key="i"-->
<!--                            ></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td>星期二</td>-->
<!--                            <td-->
<!--                              @mousedown.prevent="handleMouseDown(i,1)"-->
<!--                              @mouseup.prevent="handleMouseUp(i,1)"-->
<!--                              class="calendar-atom-time"-->
<!--                              :class="item.class"-->
<!--                              v-for="(item,i) in rowUnit[1]"-->
<!--                              :key="i"-->
<!--                            ></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td>星期三</td>-->
<!--                            <td-->
<!--                              @mousedown.prevent="handleMouseDown(i,2)"-->
<!--                              @mouseup.prevent="handleMouseUp(i,2)"-->
<!--                              class="calendar-atom-time"-->
<!--                              :class="item.class"-->
<!--                              v-for="(item,i) in rowUnit[2]"-->
<!--                              :key="i"-->
<!--                            ></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td>星期四</td>-->
<!--                            <td-->
<!--                              @mousedown.prevent="handleMouseDown(i,3)"-->
<!--                              @mouseup.prevent="handleMouseUp(i,3)"-->
<!--                              class="calendar-atom-time"-->
<!--                              :class="item.class"-->
<!--                              v-for="(item,i) in rowUnit[3]"-->
<!--                              :key="i"-->
<!--                            ></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td>星期五</td>-->
<!--                            <td-->
<!--                              @mousedown.prevent="handleMouseDown(i,4)"-->
<!--                              @mouseup.prevent="handleMouseUp(i,4)"-->
<!--                              class="calendar-atom-time"-->
<!--                              :class="item.class"-->
<!--                              v-for="(item,i) in rowUnit[4]"-->
<!--                              :key="i"-->
<!--                            ></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td>星期六</td>-->
<!--                            <td-->
<!--                              @mousedown.prevent="handleMouseDown(i,5)"-->
<!--                              @mouseup.prevent="handleMouseUp(i,5)"-->
<!--                              class="calendar-atom-time"-->
<!--                              :class="item.class"-->
<!--                              v-for="(item,i) in rowUnit[5]"-->
<!--                              :key="i"-->
<!--                            ></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td>星期日</td>-->
<!--                            <td-->
<!--                              @mousedown.prevent="handleMouseDown(i,6)"-->
<!--                              @mouseup.prevent="handleMouseUp(i,6)"-->
<!--                              class="calendar-atom-time"-->
<!--                              :class="item.class"-->
<!--                              v-for="(item,i) in rowUnit[6]"-->
<!--                              :key="i"-->
<!--                            ></td>-->
<!--                          </tr>-->

<!--                          <tr>-->
<!--                            <td colspan="49" class="td-table-tip">-->
<!--                              <div class="clearfix">-->
<!--                                <span class="pull-left tip-text">请用鼠标点选时间段</span>-->
<!--                                <a @click="clear" class="pull-right">清空</a>-->
<!--                              </div>-->
<!--                            </td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td colspan="49" class="timeContent">-->
<!--                              <div v-for="(item,index) in timeStr" :key="index" v-show="item.length">-->
<!--                                <span>{{ weekDate[index + 1] }}:</span>-->
<!--                                <strong>-->
<!--                                  <span>{{ item }}</span>-->
<!--                                </strong>-->
<!--                              </div>-->
<!--                            </td>-->
<!--                          </tr>-->
<!--                          </tbody>-->
<!--                        </table>-->
<!--                      </div>-->
<!--                      &lt;!&ndash; 鼠标的画框的效果 &ndash;&gt;-->
<!--                      <div-->
<!--                        id="container"-->
<!--                        v-bind:style="{backgroundColor:back,-->
<!--            height:h+'px',-->
<!--            width:w+'px',-->
<!--            position:'absolute',-->
<!--            left:left+'px',-->
<!--            top:top+'px',-->
<!--            opacity:0.2,-->
<!--            border:len+'px dashed #000',-->
<!--            zIndex:-1}"-->
<!--                      ></div>-->
<!--                    </div>-->
                  </el-card>
                </el-form-item>
                <!--               竞价策略-->
                <el-form-item label="竞价策略：">
                  <div class="pub_display tflx">
                    <div class="tflx_list" v-for="(item,index) in jjcl" @click="jjclTabClick(item)">
                      <!--            <span :style="item.id==gglxActiveId?'color:red':''">{{ item.name }}</span>-->
                      <div :style="item.id==jjclActiveId?'color:#2a55e5':''">
                        <div style="font-weight: bold">{{ item.name }}</div>
                        <div>{{ item.des }}</div>
                      </div>

                    </div>
                  </div>
                </el-form-item>
                <!--                预算择优分配-->
                <el-form-item label="预算择优分配:">
                  <div class="pub_display gglx">
                    <div class="tabhover" v-for="(item,index) in yszyfp" @click="yszyfpTabClick(item)">
              <span
                :style="item.id==yszyfpActiveId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                    </div>
                  </div>
                  <el-tag>启用后，系统则会自动为不同广告分配合适的预算</el-tag>
                </el-form-item>
                <!-- 项目预算-->
                <el-form-item label="项目预算:">
                  <div class="pub_display gglx">
                    <div class="tabhover" v-for="(item,index) in xmys" @click="xmysTabClick(item)">
              <span
                :style="item.id==xmysActiveId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>
                    </div>
                  </div>
                  <div v-show="formInline.delivery_setting.budget_mode=='BUDGET_MODE_TOTAL'">
                    <el-input v-model="formInline.delivery_setting.budget" placeholder="请输入预算金额"></el-input>
                    <div style="color: red">请输入预算，不少于100元，不超过999999.99元</div>
                  </div>
                </el-form-item>
                <!--                付费方式-->
                <el-form-item label="付费方式:">
                  <div class="pub_display gglx">
                    <div class="tabhover"
                         style="color: rgb(42, 85, 229); border: 1px solid; padding: 2px 5px; border-radius: 5px;display: flex;align-items: center"
                    >
                      按展示付费(oCPM)
                      <el-popover
                        placement="top-start"
                        title="标题"
                        width="200"
                        trigger="hover"
                        content="该方式根据转化进行优化，按照展示进行计费，为您优选流量，最大化转化效果"
                      >
                        <div class="wenhao" slot="reference">?</div>
                      </el-popover>
                    </div>
                  </div>
                  <el-tag>此竞价策略暂无赔付，请了解投放注意事项，详见竞价策略</el-tag>
                </el-form-item>
              </el-card>
              <h3>第三方监测链接</h3>
              <el-card>
                <!--                预算择优分配-->
                <el-form-item label="监测链接:">
                  <div class="pub_display gglx">
                    <div class="tabhover" v-for="(item,index) in jclj" @click="jcljTabClick(item)">
              <span
                :style="item.id==jcljActiveId?'color:#2a55e5;border:1px solid;padding:2px 5px;border-radius:5px':''"
              >{{ item.name }}</span>

                    </div>

                  </div>
                  <div v-if="jcljActiveName=='CUSTOM'">

                    <el-tag>{{ jclj[1].des }}</el-tag>
                    <el-form-item label="展示:">
                      <el-input v-model="formInline.track_url_setting.track_url[0]"
                                placeholder="请输入链接地址"></el-input>
                    </el-form-item>
                    <el-form-item label="有效触点:">
                      <el-input v-model="formInline.track_url_setting.action_track_url[0]"
                                placeholder="请输入链接地址"></el-input>
                    </el-form-item>
                    <el-form-item label="视频播放:">
                      <el-input v-model="formInline.track_url_setting.video_play_first_track_url[0]"
                                placeholder="请输入链接地址"></el-input>
                    </el-form-item>
                    <el-form-item label="视频播完:">
                      <el-input v-model="formInline.track_url_setting.video_play_done_track_url[0]"
                                placeholder="请输入链接地址"></el-input>
                    </el-form-item>
                    <el-form-item label="视频有效播放:">
                      <el-input v-model="formInline.track_url_setting.video_play_effective_track_url[0]"
                                placeholder="请输入链接地址"></el-input>
                    </el-form-item>
                  </div>
                  <div v-else>
                    <el-form-item label="已有链接:">
                      <el-select v-model="formInline.track_url_setting.video_play_effective_track_url[0]"
                                 placeholder="请选择">
                        <el-option
                          v-for="item in yyljOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!--                    <el-table-->
                    <!--                      ref="singleTable"-->
                    <!--                      :data="yyljOptions"-->
                    <!--                      highlight-current-row-->
                    <!--                      @current-change="handleCurrentChange"-->
                    <!--                      style="width: 100%">-->
                    <!--                      <el-table-column-->
                    <!--                        type="index"-->
                    <!--                        width="50">-->
                    <!--                      </el-table-column>-->
                    <!--                      <el-table-column-->
                    <!--                        property="date"-->
                    <!--                        label="日期"-->
                    <!--                        width="120">-->
                    <!--                      </el-table-column>-->
                    <!--                      <el-table-column-->
                    <!--                        property="name"-->
                    <!--                        label="姓名"-->
                    <!--                        width="120">-->
                    <!--                      </el-table-column>-->
                    <!--                      <el-table-column-->
                    <!--                        property="address"-->
                    <!--                        label="地址">-->
                    <!--                      </el-table-column>-->
                    <!--                    </el-table>-->
                    <el-tag>{{ jclj[0].des }}</el-tag>
                  </div>
                </el-form-item>

              </el-card>
              <h3>项目名称</h3>
              <el-card>
                <el-form-item label="项目名称">
                  <el-input
                    placeholder="请输入内容"
                    v-model="formInline.name"
                    :disabled="true">
                  </el-input>
                </el-form-item>
              </el-card>
            </div>

            <el-dialog title="保存为定向包" :append-to-body="true" :visible.sync="dxbdialogFormVisible">
              <el-form :model="bcwdxb">
                <el-form-item label="定向包名称">
                  <el-input v-model="bcwdxb.name" autocomplete="off" plac></el-input>
                </el-form-item>
                <el-form-item label="定向包名称">
                  <el-input v-model="bcwdxb.des" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dxbdialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dxbdialogFormVisible = false">确 定</el-button>
              </div>
            </el-dialog>
          </el-tab-pane>
          <el-tab-pane label="选择已有定向包" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </el-card>
    </el-form>
    <!--    点击选择产品-->
    <div class="select_product_new" v-show="isShowSelectProduct">
      <cpgl></cpgl>

    </div>
    <!--    选择应用-->
    <div>
      <el-dialog :append-to-body="true" title="应用管理" :visible.sync="drawerYingyong">
        <el-form class="cptf_form">
          <div class="block">
            <el-select v-model="value0" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-input placeholder="请输入产品名称或ID" v-model="formInline.product_setting" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form>
        <el-table :data="tableData">
          <el-table-column property="date" label="应用" width="150"></el-table-column>
          <el-table-column property="name" label="应用ID" width="200"></el-table-column>
          <el-table-column property="address" label="应用名称"></el-table-column>
          <el-table-column property="address" label="应用包名"></el-table-column>
          <el-table-column property="address" label="版本信息"></el-table-column>
          <el-table-column property="address" label="操作"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import cpgl from './cpgl.vue'

export default {
  components: {cpgl},

  data() {
    return {
      formInline: {
        name: '项目名称',
        user: '',
        landing_type: 'APP',
        app_promotion_type: 'DOWNLOAD',
        delivery_mode: 'MANUAL',
        ad_type: 'ALL',
        product_setting: 'NO_MAP',
        download_type: 'DOWNLOAD_URL',
        optimize_goal: {},
        delivery_range: {
          inventory_catalog: '',
          inventory_type: []
        },
        audience: {
          retargeting_tags_include: [],  //自定义人群
          district: 'NONE',
          interest_action_mode: '',     //行为兴趣
          aweme_fan_behaviors: '',  //抖音达人
          age: [],
          gender: 'NONE',
          ac: [],  //网络
          device_type: [],   //设备类型
          launch_price: [0, 5000],   //手机价格
          device_brand: []   //手机品牌

        },
        // interest_action_mode: [],
        geolocation: {
          filter_aweme_abnormal_active: 'OFF',
          filter_aweme_fans_count: '',
          hide_if_converted: '',
          converted_time_duration: 'THREE_MONTH',
          action_days: ''
        },
        location_type: '',     //地域单选框
        delivery_setting: {
          schedule_type: '',
          start_time: '',
          end_time: '',
          schedule_time: '',   //投放时段
          budget_optimize_switch: 'OFF',   //预算择优分配
          budget_mode: '',   //项目预算
          budget: ''   //项目金额
        },
        track_url_setting: {
          track_url_type: 'CUSTOM',  //监测链接
          track_url: [],  //展示
          action_track_url: [],   //点击
          video_play_effective_track_url: [],  //视频有效播放
          video_play_done_track_url: [], //视频播完
          video_play_first_track_url: []   //视频开始播放
        },
        asset_type: '',    //资产类型
        promotion_type: 'AWEME_HOME_PAGE'   //原生投放内容
      },
      // 投放时间选择
      tfTime: null,
      // 手机品牌
      sjpp: [
        {
          key: 'HONOR',
          label: '荣耀'
        }, {
          key: 'APPLE',
          label: '苹果'
        },
        {
          key: 'HUAWEI',
          label: '华为'
        },
        {
          key: 'XIAOMI',
          label: '小米'
        },
        {
          key: 'SAMSUNG',
          label: '三星'
        },
        {
          key: 'OPPO',
          label: 'OPPO'
        }, {
          key: 'VIVO',
          label: 'VIVO'
        }, {
          key: 'LENOVO',
          label: '联想'
        }
      ],
      // 下载方式
      downloadDes: '吸引用户下载并安装您的应用程序',
      downloadWay: [
        {
          id: 0,
          name: '应用下载',
          value: 'DOWNLOAD',
          des: '吸引用户下载并安装您的应用程序'
        },
        {
          id: 1,
          name: '应用调起',
          value: 'LAUNCH',
          des: '吸引用户在应用程序内采取行动'
        },
        {
          id: 2,
          name: '预约下载',
          value: 'RESERVE',
          des: '让用户在应用程序正式推出前提前预约注册'
        }
      ],
      // 推广目的
      tuiguanglist: [
        {
          id: 0,
          name: '应用推广',
          value: 'APP',
          des: '推广您的线上APP'
        },
        {
          id: 1,
          name: '销售线索',
          value: 'LINK',
          des: '为您的生意销售收集用户线索'
        },
        {
          id: 2,
          name: '电商',
          value: 'SHOP',
          des: '提升线上商品或店铺的推广效果'
        }, {
          id: 4,
          name: '原生互动',
          value: 'NATIVE_ACTION',
          des: '提升抖音号的互动、加粉等行为'
        }
      ],
      // 竞价策略
      jjcl: [
        {
          id: 0,
          name: '稳定成本',
          value: 'CUSTOM',
          des: '成本稳定在出价附近'
        },
        {
          id: 1,
          name: '最优成本',
          value: 'UPPER_CONTROL',
          des: '均匀消耗预算，成本不超过出价'
        },
        {
          id: 2,
          name: '最大转化',
          value: 'NO_BID',
          des: '花完预算，拿到最大转化（价值）'
        }
      ],
      // 广告类型
      gglx: [
        {
          id: 0,
          name: '通投广告',
          value: 'ALL'
        },
        {
          id: 1,
          name: '搜索广告',
          value: 'SEARCH'
        }
      ],
      // 下载方式
      xzfs: [
        {
          id: 0,
          name: '直接下载',
          value: 'ALL'
        },
        {
          id: 1,
          name: '落地页下载',
          value: 'SEARCH'
        }
      ],
      // 数据对接方式
      sjdjfs: [
        {
          id: 0,
          name: '转化跟踪',
          value: 'ALL'
        },
        {
          id: 1,
          name: '事件管理',
          value: 'SEARCH'
        }
      ],
      // 投放版位
      tfbw: [
        {
          id: 0,
          name: '通投智选',
          value: 'UNIVERSAL_SMART',
          des: '通投智选下，广告会智能优选流量网络平台，提升广告跑量与效果稳定性'
        },
        {
          id: 1,
          name: '首选媒体',
          value: 'MANUAL',
          des: '广告将主要投放在首选媒体上，同时为了帮助广告计划更好的跑量和优化成本，系统有可能将广告智能拓展投放到其他流量场景。'
        }
      ],
      // 地域
      dy: [
        {
          id: 0,
          name: ' 不限',
          value: 'NONE'
        },
        {
          id: 1,
          name: ' 按行政区域划分',
          value: 'REGION'
        },
        {
          id: 2,
          name: ' 按商圈',
          value: 'BUSINESS_DISTRICT'
        }
      ],
      // 投放内容
      tfnr: [
        {
          id: 0,
          name: ' 橙子落地页',
          value: 'ORANGE'
        },
        {
          id: 1,
          name: ' 自研落地页',
          value: 'THIRDPARTY'
        },
        {
          id: 2,
          name: ' 抖音主页',
          value: 'AWEME'
        }, {
          id: 3,
          name: '微信小程序',
          value: 'WECHAT_APPLET'
        }, {
          id: 4,
          name: ' 字节小程序',
          value: 'MICRO_APP'
        }, {
          id: 5,
          name: '企业号落地页',
          value: 'ENTERPRISE'
        }
      ],
      // 原生互动投放内容
      ystfnr: [
        {
          id: 0,
          name: ' 抖音主页',
          value: 'AWEME_HOME_PAGE'
        },
        {
          id: 1,
          name: '落地页',
          value: 'LANDING_PAGE_LINK'
        }
      ],
      dataObj: {
        province: {
          '101103': '广东省',
        },
        city: {
          '101103': [
            {
              id: 101164181112,
              label: '深圳市'
            }
          ]
        },
        county: {
          '101164181112': [
            {
              id: 106105142126,
              label: '宝安区'
            }
          ]
        }
      },
      // 地域单选框

      selectedData: [],
      // 性别
      xb: [
        {
          id: 0,
          name: ' 不限',
          value: 'NONE'
        },
        {
          id: 1,
          name: ' 男',
          value: 'GENDER_MALE'
        },
        {
          id: 2,
          name: ' 女',
          value: 'GENDER_FEMALE'
        }
      ],
      // 行为兴趣
      xwxq: [
        {
          id: 0,
          name: ' 不限',
          value: 'UNLIMITED'
        },
        {
          id: 1,
          name: ' 系统推荐 ',
          value: 'RECOMMEND'
        },
        {
          id: 2,
          name: ' 自定义',
          value: 'CUSTOM'
        }
      ],
      // 抖音达人
      dydr: [
        {
          id: 0,
          name: ' 不限',
          value: 'NONE'
        },
        {
          id: 1,
          name: ' 男',
          value: 'GENDER_MALE'
        },
        {
          id: 2,
          name: ' 女',
          value: 'GENDER_FEMALE'
        }
      ],
      // 行为时间段
      xwsjd: [{
        value: 7,
        label: '7天'
      }, {
        value: 15,
        label: '15天'
      }, {
        value: 30,
        label: '90天'
      }, {
        value: 60,
        label: '60天'
      }, {
        value: 90,
        label: '90天'
      }],
      // 过滤高活跃用户
      glghyyh: [
        {
          id: 0,
          name: '不过滤',
          value: 'OFF'
        },
        {
          id: 1,
          name: ' 过滤',
          value: 'ON'
        }
      ],
      // 预算择优分配
      yszyfp: [
        {
          id: 0,
          name: '不启用',
          value: 'OFF'
        },
        {
          id: 1,
          name: ' 启用',
          value: 'ON'
        }
      ],
      // 监测链接
      jclj: [
        {
          id: 0,
          name: '已有链接',
          value: 'GROUP_ID',
          des: '默认同步事件管理配置的监测链接组，后续在事件管理变更所选监测链接内容将影响当前计划'
        },
        {
          id: 1,
          name: '自定义',
          value: 'CUSTOM',
          des: '当前计划以自定义填写的监测链接为准，后续在事件管理变更监测链接不影响当前计划，请注意不要停止自定义填写的监测链接服务'
        }
      ],
      // 项目预算
      xmys: [
        {
          id: 0,
          name: '不限',
          value: 'BUDGET_MODE_INFINITE'
        },
        {
          id: 1,
          name: ' 设置预算',
          value: 'BUDGET_MODE_TOTAL'
        }
      ],
      // 过滤高活跃用户
      glggzyh: [
        {
          id: 0,
          name: '不过滤',
          value: ''
        },
        {
          id: 1,
          name: ' >1000',
          value: '1000'
        },
        {
          id: 2,
          name: ' >500',
          value: '500'
        },
        {
          id: 3,
          name: ' >200',
          value: '200'
        }
      ],
      // 过滤已转化的用户
      glyzhyh: [
        {
          id: 0,
          name: '不限制',
          value: 'NO_EXCLUDE'
        },
        {
          id: 1,
          name: '项目',
          value: 'PROJECT'
        },
        {
          id: 2,
          name: '广告账户',
          value: 'ADVERTISER'
        },
        {
          id: 3,
          name: '公司账户',
          value: 'CUSTOMER'
        },
        {
          id: 4,
          name: '组织账户',
          value: 'ORGANIZATION'
        }
      ],
      // 过滤时间
      glsj: [
        {
          id: 0,
          name: '不限',
          value: 'NONE'
        },
        {
          id: 1,
          name: '当天',
          value: 'TODAY'
        },
        {
          id: 2,
          name: '7天',
          value: 'SEVEN_DAY'
        },
        {
          id: 3,
          name: '1个月',
          value: 'ONE_MONTH'
        },
        {
          id: 4,
          name: '3个月',
          value: 'THREE_MONTH'
        },
        {
          id: 5,
          name: '6个月',
          value: 'SIX_MONTH'
        }, {
          id: 6,
          name: '12个月',
          value: 'TWELVE_MONTH'
        }
      ],
      // 自定义人群
      zdyrq: [
        {
          id: 0,
          name: ' 不限',
          value: 'UNLIMITED'
        },
        {
          id: 1,
          name: ' 自定义',
          value: 'CUSTOM'
        }
      ],
      // 投放时间
      tfsj: [
        {
          id: 0,
          name: '从今天起长期投放',
          value: 'SCHEDULE_FROM_NOW'
        },
        {
          id: 1,
          name: ' 设置开始和结束日期',
          value: 'SCHEDULE_START_END'
        }
      ],
      // 投放时段
      tfsd: [
        {
          id: 0,
          name: '不限',
          value: 'FIRST'
        },
        {
          id: 1,
          name: ' 指定时间段',
          value: 'SECOND'
        }
      ],
      // 手机品牌
      sjppTab: [
        {
          id: 0,
          name: ' 不限',
          value: 'UNLIMITED'
        },
        {
          id: 1,
          name: ' 按品牌',
          value: 'CUSTOM'
        }
      ],
      // 手机价格切换
      sjjgqh: [
        {
          id: 0,
          name: ' 不限',
          value: 'UNLIMITED'
        },
        {
          id: 1,
          name: ' 自定义',
          value: 'CUSTOM'
        }
      ],
      // 年龄
      nl: [
        {
          id: 1,
          name: ' 18-23',
          value: 'AGE_BETWEEN_18_23'
        },
        {
          id: 2,
          name: ' 14-30',
          value: 'AGE_BETWEEN_24_30'
        },
        {
          id: 3,
          name: ' 31-40',
          value: 'AGE_BETWEEN_31_40'
        },
        {
          id: 4,
          name: ' 50+',
          value: 'AGE_ABOVE_50'
        }
      ],
      // 设备类型
      sblx: [
        {
          id: 1,
          name: '智能手机',
          value: 'MOBILE'
        },
        {
          id: 2,
          name: '平板',
          value: 'PAD'
        }
      ],
      // 网络
      wl: [
        {
          id: 1,
          name: 'WIFI',
          value: 'WIFI'
        },
        {
          id: 2,
          name: '2G',
          value: '2G'
        },
        {
          id: 3,
          name: ' 3G',
          value: '3G'
        },
        {
          id: 4,
          name: '4G',
          value: '4G'
        },
        {
          id: 5,
          name: '5G',
          value: '5G'
        }
      ],
      // 年龄跟多分段
      // 媒体选择
      nlMore: [
        {
          id: 0,
          name: '18-19',
          value: 'AGE_BETWEEN_18_19'
        }, {
          id: 1,
          name: '20-23',
          value: 'AGE_BETWEEN_20_23'
        }, {
          id: 2,
          name: '24-30',
          value: 'AGE_BETWEEN_24_30'
        }, {
          id: 3,
          name: '31-35',
          value: 'AGE_BETWEEN_31_35'
        }, {
          id: 4,
          name: '36-40',
          value: 'AGE_BETWEEN_36_40'
        }, {
          id: 5,
          name: '41-45',
          value: 'AGE_BETWEEN_41_45'
        }, {
          id: 6,
          name: '46-50',
          value: 'AGE_BETWEEN_46_50'
        }, {
          id: 7,
          name: '51-55',
          value: 'AGE_BETWEEN_51_55'
        }, {
          id: 8,
          name: '56-59',
          value: 'AGE_BETWEEN_56_59'
        }, {
          id: 9,
          name: '60+',
          value: 'AGE_ABOVE_60'
        }
      ],
      // 媒体选择
      mtxzTable: [
        {
          id: 0,
          name: '今日头条',
          value: 'INVENTORY_FEED'
        }, {
          id: 1,
          name: '西瓜视频',
          value: 'INVENTORY_VIDEO_FEED'
        }, {
          id: 2,
          name: '抖音短视频',
          value: 'INVENTORY_AWEME_FEED'
        }, {
          id: 3,
          name: '番茄小说',
          value: 'INVENTORY_TOMATO_NOVEL'
        }, {
          id: 4,
          name: '穿山甲',
          value: 'INVENTORY_UNION_SLOT'
        }, {
          id: 5,
          name: 'ohayoo精品游戏',
          value: 'UNION_BOUTIQUE_GAME'
        }
      ],
      // 投放类型
      tflx: [
        {
          id: 0,
          name: '常规投放',
          value: 'NORMAL',
          des: '灵活专业，自定义投放周期，适用预算充足场景'
        },
        {
          id: 1,
          name: '周期稳投',
          value: 'DURATION',
          des: '高效省心、固定投放周期，适用需要稳定成本的场景'
        }
      ],
      // 产品列表
      tableData: [
        {
          id: '0001',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '0002',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: '0003',
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          id: '0004',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      // 自定义人群
      zdyrqList: [
        {
          id: '0001',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '0002',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }
      ],
      // 保存为定向包
      bcwdxb: {
        name: '',
        des: ''
      },
      // 行为兴趣
      xwxqActiveId: '',
      dxbdialogFormVisible: false,
      //   当前选择的行的id
      templateSelection: '',
      //   当前选择的行的数据
      checkList: [],
      // 关联产品
      glcp: [
        {
          id: 0,
          name: '不启用',
          value: 'NO_MAP'
        },
        {
          id: 1,
          name: '启用',
          value: 'SINGLE'
        }
      ],
      downloadActiveId: 0,
      tgmdActiveId: 0,
      //   广告类型
      gglxActiveId: 0,
      tflxActiveId: 0,
      //   下载方式
      xzfsActiveId: 0,
      // 数据对接方式
      sjdjfsActiveId: 0,
      tfbwActiveId: 0,
      // 地域
      dyActiveId: 0,
      // 投放内容
      tfnrActiveId: 0,
      // 原生投放内容
      ystfnrActiveId: 0,
      // 性别
      xbActiveId: 0,
      // 过滤高活跃用户
      glghyyhActiveId: 0,
      glggzyhActiveId: 0,
      glyzhyhActiveId: 0,
      // 过滤时间
      glsjActiveId: 0,
      // 抖音达人
      dydrActivedId: 0,
      // 年龄
      nlActiveId: 0,
      //   关联产品
      glcpActiveId: 0,
      // 自定义人群
      zdyrqActiveId: 0,
      // 投放时间
      tfsjActiveId: 0,
      // 投放时段
      tfsdActiveId: 0,
      // 手机品牌
      sjppActiveId: 0,
      // 手机价格切换
      sjjgActiveId: 0,
      // 竞价策略
      jjclActiveId: 0,
      // 预算择优分配
      yszyfpActiveId: 0,
      // 检测链接
      jcljActiveId: 1,
      // 项目预算
      xmysActiveId: 0,
      isShowAge: false,
      isShowSelectProduct: false,
      drawerYingyong: false,
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
      // 已有链接
      yyljOptions: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      activeName: 'first',
      dyActiveName: 'first',
      zdyActiveName: 'first',
      tfsdActiveName: 'first',
      // 激活人群
      zdyrqActiveName: 'UNLIMITED',
      sjjgActiveName: 'UNLIMITED',
      sjppActiveName: 'UNLIMITED',
      tfsjActiveName: 'SCHEDULE_FROM_NOW',
      xmysActiveName: 'BUDGET_MODE_INFINITE',
      jcljActiveName: 'CUSTOM',
      value0: '',
      marks: {
        0: '0',
        5000: '5000',
        10000: '10000',
        11000: '11000'
      },
      tableHeader: [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23"
      ],
      weekDate: {
        "1": "星期一",
        "2": "星期二",
        "3": "星期三",
        "4": "星期四",
        "5": "星期五",
        "6": "星期六",
        "7": "星期日"
      },
      rowUnit: [], //每一个单元格
      timeContent: [], //选中的时间段原始数据
      timeSection: [], //时间段，可以返回给后台的数据
      timeStr: [], //时间段，前端显示的数据
      beginDay: 0,
      beginTime: 0,
      downEvent: false,
      kuangObj: {
        width: 0,
        height: 0,
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        oldLeft: 0,
        oldTop: 0,
        flag: false
      },
      py: "",
      px: "",
      back: "#31676f",
      h: "",
      w: "",
      top: "",
      left: "",
      len: 0

    }
  },
  created() {
    this.init();
  },
  methods: {
    tabClick(item) {
      this.$confirm('切换推广目的将会清空下方已填写的投放内容及目标，是否继续切换？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.downloadActiveId = item.id
        this.formInline.app_promotion_type = item.value
        this.downloadDes = item.des
      }).catch(() => {

      })
    },
    sliderVlaue(e) {
      console.log(e)
      this.formInline.audience.launch_price = e
    },

    tgmdTabClick(item) {
      this.$confirm('切换推广目的将会清空下方已填写的投放内容及目标，是否继续切换？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(item)
        this.tgmdActiveId = item.id
        this.formInline.landing_type = item.value
      }).catch(() => {

      })
    },
    jjclTabClick(item) {
      this.jjclActiveId = item.id
      // this.formInline.landing_type = item.value
    },
    gglxTabClick(item) {
      this.gglxActiveId = item.id
      this.formInline.ad_type = item.value
    },
    // 下载方式
    xzfsTabClick(item) {
      this.xzfsActiveId = item.id
      this.formInline.download_type = item.value
    },
    // 数据对接方式
    sjdjfsTabClick(item) {
      this.sjdjfsActiveId = item.id
      // this.formInline.download_type = item.value
    },
    // 自定义人群
    zdyrqTabClick(item) {
      this.zdyrqActiveId = item.id
      this.zdyrqActiveName = item.value
      // 是数组
      // this.formInline.audience.retargeting_tags_include = item.value
    },
    // 投放时间
    tfsjTabClick(item) {
      this.tfsjActiveId = item.id
      this.tfsjActiveName = item.value
      // 是数组
      // this.formInline.audience.retargeting_tags_include = item.value
    },
    // 投放时段
    tfsdTabClick(item) {
      this.tfsdActiveId = item.id
      this.tfsdActiveName = item.value
      // 是数组
      // this.formInline.audience.retargeting_tags_include = item.value
    },
    // 手机品牌
    sjppTabClick(item) {
      this.sjppActiveId = item.id
      this.sjppActiveName = item.value
      if (item.id == 0) {
        this.formInline.audience.device_brand = []
      }
      // 是数组
      // this.formInline.audience.retargeting_tags_include = item.value
    },
    // 手机价格切换
    sjjgTabClick(item) {
      this.sjjgActiveId = item.id
      this.sjjgActiveName = item.value
    },
    // 投放版位
    tfbwTabClick(item) {
      this.formInline.delivery_range.inventory_type = []
      this.$refs.myTable.clearSelection()
      this.tfbwActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.delivery_range.inventory_catalog = item.value
    },
    // 地域
    dyTabClick(item) {
      this.dyActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.audience.district = item.value
    },
    // 投放内容
    fgnrTabClick(item) {
      this.tfnrActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.asset_type = item.value
    },
    // 原生投放内容
    ystfnrTabClick(item) {
      this.ystfnrActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.promotion_type = item.value
    },
    // 性别
    xbTabClick(item) {
      this.xbActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.audience.gender = item.value
    },
    // 过滤高活跃用户
    glghyyhTabClick(item) {
      this.glghyyhActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.geolocation.filter_aweme_abnormal_active = item.value
    },
    // 预算择优分配
    yszyfpTabClick(item) {
      this.yszyfpActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.delivery_setting.budget_optimize_switch = item.value
    },
    // 监测链接
    jcljTabClick(item) {
      this.jcljActiveId = item.id
      this.jcljActiveName = item.value
      this.formInline.track_url_setting.track_url_type = item.value
    },
    // 项目预算
    xmysTabClick(item) {
      this.xmysActiveId = item.id
      this.xmysActiveName = item.value
      this.formInline.delivery_setting.budget_mode = item.value
    },
    // 过滤高关注用户
    glggzyhTabClick(item) {
      this.glggzyhActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.geolocation.filter_aweme_fans_count = item.value
      console.log(this.formInline.geolocation.filter_aweme_fans_count)
    },
    // 过滤已转化用户
    glyzhyhTabClick(item) {
      this.glyzhyhActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.geolocation.hide_if_converted = item.value
    },
    // 过滤时间
    glsjTabClick(item) {
      this.glsjActiveId = item.id
      // this.formInline.download_type = item.value
      this.formInline.geolocation.converted_time_duration = item.value
    },
    // 年龄
    nlTabClick(e) {
      console.log(e)
      // this.nlActiveId = item.id
      // // this.formInline.download_type = item.value
      // this.formInline.age = item.value
    },
    wlTabClick(e) {
      this.formInline.audience.ac = e
      // this.nlActiveId = item.id
      // // this.formInline.download_type = item.value
      // this.formInline.age = item.value
    },
    sblxTabClick(e) {
      console.log(e)
    },
    // 设备类型不限
    shlxNone() {
      this.formInline.audience.device_type = []
    },
    nlClick(e) {
      console.log(e)
      this.isShowAge = false
    },
    // 投放类型
    tflxTabClick(item) {
      this.tflxActiveId = item.id
      this.formInline.delivery_type = item.value
    },
    // 行为兴趣
    xwxqTabClick(item) {
      this.xwxqActiveId = item.id
      this.formInline.audience.interest_action_mode = item.value
    },
    // 关联产品
    glcpTabClick(item) {
      this.glcpActiveId = item.id
      this.formInline.product_setting = item.value
    },
    // 选择产品
    selectProduct() {
      this.isShowSelectProduct = true
    },
    // 年龄不限
    nlNone(data) {

      this.formInline.audience.age = []
      if (data == 1) {
        this.isShowAge = true
      } else {
        this.isShowAge = false
      }
    },
    // 投放时间选择
    changePicker(e) {
      this.tfTime = e
      this.formInline.delivery_setting.start_time = e[0]
      this.formInline.delivery_setting.end_time = e[1]
    },
    wlNone(data) {
      this.formInline.audience.ac = []
    },
    singleElection(row) {
      this.templateSelection = row.id
      this.checkList = this.tableData.filter((item) => item.id === row.id)
      console.log(`该行的编号为${row.id}`)
    },
    selectYingyong() {
      this.drawerYingyong = true
    },
    handleSelectionChange(e) {
      this.formInline.delivery_range.inventory_type = []
      for (let i = 0; i < e.length; i++) {
        this.formInline.delivery_range.inventory_type.push(e[i].value)
      }
      console.log(this.formInline.delivery_range.inventory_type)
    },
    nlMoreSelectionChange(e) {
      this.formInline.audience.age = e

    },
    // 地域划分
    diyuRadio(e) {
      console.log(e)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    zdyActieClick(tab, event) {
      console.log(tab, event)
    },
    inputChange(e) {
      console.log('变了', e)
    },
    rightCheckChange(e) {
      console.log('右侧列表')
      console.log(e)
    },
    selectValue(e) {
      console.log(e)
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    init() {
      for (let i = 0; i < 7; i++) {
        let arr = [];
        for (let j = 0; j < 48; j++) {
          arr.push({class: null, timeData: j});
        }
        this.rowUnit.push(arr);
        this.timeContent.push({arr: []});
        this.timeSection.push([]);
        this.timeStr.push("");
      }
    },
    handleMouseDown(i, day) {
      this.downEvent = true; //按下时鼠标不在范围内则不算
      this.beginDay = day;
      this.beginTime = i;
    },
    dian(event) {
      // console.log(event);
      this.px = event.pageX; //获取x坐标
      this.py = event.pageY;
    },
    yi(event) {
      if (this.px == "" || this.py == "") {
        return;
      }
      var px1 = this.px;
      var px2 = this.py;
      this.left = event.pageX;
      this.top = event.pageY;
      this.h = this.top - this.py;
      this.w = this.left - this.px;
      var hc = -this.h;
      var wc = -this.w;
      this.len = 1;
      this.back = "#31676f";
      if (this.h < 0 && this.w >= 0) {
        // console.log(1);
        this.h = hc;
        this.left = px1;
      } else if (this.h >= 0 && this.w < 0) {
        // console.log(2);
        this.w = wc;
        this.top = px2;
      } else if (this.h < 0 && this.w < 0) {
        // console.log(3);
        this.h = hc;
        this.w = wc;
      } else {
        // console.log(4);
        this.left = this.px;
        this.top = this.py;
      }
      if (this.w < 0) {
        this.w = 0 - this.w;
      }
      if (this.h < 0) {
        this.h = 0 - this.h;
      }
    },
    li() {
      this.px = "";
      this.py = "";
      this.h = "";
      this.w = "";
      this.top = "";
      this.left = "";
      this.len = 0;
      this.back = "";
    },
    handleMouseUp(i, day) {
      let _this = this;
      let begin = this.beginTime;
      let start = begin <= i ? begin : i; //x轴 起点
      let length = Math.abs(begin - i);
      let end = start + length; //x轴 终点

      let dayStart = this.beginDay <= day ? this.beginDay : day; //y轴 起点
      let dayLength = Math.abs(this.beginDay - day);
      let dayEnd = dayStart + dayLength; //y轴 终点

      //当框选范围内所有块都是选中状态时,执行反选
      function isAdd() {
        for (let x = dayStart; x < dayEnd + 1; x++) {
          for (let y = start; y < end + 1; y++) {
            if (_this.rowUnit[x][y].class == null) return true;
          }
        }
        return false;
      }

      //当点击事件是在table内才触发选取数据操作
      if (this.downEvent) {
        //选时间段
        if (isAdd()) {
          //没选中的全都选上
          for (let x = dayStart; x < dayEnd + 1; x++) {
            for (let y = start; y < end + 1; y++) {
              if (this.rowUnit[x][y].class == null) {
                this.rowUnit[x][y].class = "ui-selected";
                this.timeContent[x].arr.push(this.rowUnit[x][y].timeData);
              }
            }
          }
        } else {
          //反选
          for (let x = dayStart; x < dayEnd + 1; x++) {
            for (let y = start; y < end + 1; y++) {
              if (this.rowUnit[x][y].class == "ui-selected") {
                this.rowUnit[x][y].class = null;
                var c = this.rowUnit[x][y].timeData;
                var kong = "";
                for (let i = 0; i < this.timeContent[x].arr.length; i++) {
                  if (c == this.timeContent[x].arr[i]) {
                    kong = i;
                  }
                }
                console.log(kong);
                this.timeContent[x].arr.splice(kong, 1);
              }
            }
          }
        }
        //过滤时间段,将临近的时间段合并
        this.filterTime(dayStart, dayEnd);
      }
      this.downEvent = false;
    },
    filterTime(start, end) {
      //选中的x,y坐标信息 x:0-47  y:0-6
      function sortCut(arr) {
        //提取连续的数字
        var result = [];
        arr.forEach(function (v, i) {
          var temp = result[result.length - 1];
          if (!i) {
            result.push([v]);
          } else if (v % 1 === 0 && v - temp[temp.length - 1] == 1) {
            temp.push(v);
          } else {
            result.push([v]);
          }
        });
        return result;
      }

      function toStr(num) {
        if (Number.isInteger(num)) {
          let str = num < 10 ? "0" + num : num.toString();
          return str + ":00";
        } else {
          let str =
            Math.floor(num) < 10
              ? "0" + Math.floor(num)
              : Math.floor(num).toString();
          return str + ":30";
        }
      }

      function timeToStr(arr) {
        //把数组转成方便人看到字符串
        let str = "";
        arr.forEach((arr, index) => {
          let str1 = "";
          if (index == 0) {
            str1 = toStr(arr[0]) + "~" + toStr(arr[1]);
          } else {
            str1 = " , " + toStr(arr[0]) + "~" + toStr(arr[1]);
          }
          str += str1;
        });

        return str;
      }

      //排序,分割成
      for (let i = start; i < end + 1; i++) {
        let arr1 = sortCut(this.timeContent[i].arr.sort((a, b) => a - b));
        let arr2 = [];
        arr1.forEach(arr => {
          //转成带小数点的时间段,以及供前端显示的字符串
          let arr3 = [];
          arr3.push(arr[0] / 2);
          arr3.push(arr[arr.length - 1] / 2 + 0.5);
          arr2.push(arr3);
        });
        this.timeStr[i] = timeToStr(arr2);
        this.timeSection[i] = arr2;
      }
      // console.log(this.timeSection)
    },
    clear() {
      this.rowUnit.forEach(item => {
        item.forEach(item1 => {
          item1.class = null;
        });
      });
      this.timeContent.forEach(item => {
        item.arr = [];
      });
      this.timeSection.forEach(item => {
        //赋值成空数组[]出问题
        item.length = 0;
      });
      //遍历赋值成'',不管用
      this.timeStr.length = 0;
      for (let i = 0; i < 7; i++) {
        this.timeStr.push("");
      }
      //this.initState = true
    }
  }
}
</script>
<style scoped lang="scss">
.tab_main, .tgmd_main {
  display: flex;

  .tabhover {
    cursor: pointer;
    margin-left: 20px;

    &:nth-child(1) {
      margin-left: 0;
    }

  }
}

.tgmd_main {
  display: flex;
  align-items: center;
}

.tgmd_main_hover {
  width: 70px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #2a55e5;
  display: flex;
  justify-content: center;
  align-items: center;

}

.yxcj {
  border: 1px solid #2a55e5;
  padding: 0px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  border-radius: 5px;
  cursor: pointer;
}

.yxcj-disabled {
  background-color: #f8f8f9;
  color: #969aa0;
  border: none;
}

.pub_display {
  display: flex;
  align-items: center;
}

.nl_display {
  display: flex;
}

.gglx {
  .tabhover {
    margin-right: 20px;
    cursor: pointer;
  }
}

.tflx {
  .tflx_list {
    margin-right: 20px;
    margin-right: 8px;
    margin-top: 8px;
    //width: 208px;
    border: 1px solid #dfe0e2;
    border-radius: 4px;
    padding: 16px 16px;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }
}

.select_product {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: #f4f4f5;
  color: #64666b;
  font-size: 14px;
  border-radius: 4px;
  max-width: 500px;
}

.select_product_new {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: pink;
}

.cptf_form {
  display: flex;
  margin: 15px 0;
}

.input-with-select.el-input.el-input--medium.el-input-group.el-input-group--append {
  max-width: 340px;
  margin-left: 20px;
}

.kuang {
  width: 70px;
  height: 36px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f5;
  margin: 0 15px;
  cursor: pointer;
}

.m-10 {
  margin: 0 10px;
}

.card-w-3 {
  width: 500px;
}

.wenhao {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #969aa0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  margin-left: 10px;
}

::v-deep .el-form-item {
  margin-bottom: 10px !important;
}

::v-deep .el-card {
  margin-bottom: 10px !important;
}

.byted-weektime .calendar {
  -webkit-user-select: none;
  position: relative;
  display: inline-block;
}

#tableBody {
  /* position: relative; */
}

/*.byted-weektime .calendar .schedule{background:#2F88FF;width:0;height:0;position:fixed;display:none;top:0;left:0;pointer-events:none;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;-ms-transition:all 400ms ease;transition:all 400ms ease}*/
.byted-weektime .calendar .calendar-table {
  border-collapse: collapse;
  border-radius: 4px;
}

.byted-weektime .calendar .calendar-table tr .calendar-atom-time:hover {
  background: #ccc;
}

.byted-weektime .calendar .calendar-table tr .ui-selected {
  background: #2f88ff;
}

.byted-weektime .calendar .calendar-table tr .ui-selected:hover {
  background: #2f88ff;
}

.byted-weektime .calendar .calendar-table tr,
.byted-weektime .calendar .calendar-table td,
.byted-weektime .calendar .calendar-table th {
  border: 1px solid #ccc;
  font-size: 12px;
  text-align: center;

  line-height: 1.8em;
  -webkit-transition: background 200ms ease;
  -moz-transition: background 200ms ease;
  -ms-transition: background 200ms ease;
  transition: background 200ms ease;
}

.byted-weektime .calendar .calendar-table tbody tr {
  height: 30px;
}

.byted-weektime .calendar .calendar-table tbody tr td:first-child {
  background: #f8f9fa;
}

.byted-weektime .calendar .calendar-table thead th,
.byted-weektime .calendar .calendar-table thead td {
  background: #f8f9fa;
}

.byted-weektime .calendar .calendar-table .td-table-tip {
  line-height: 2.4em;
  padding: 0 12px 0 19px;
  background: #fff !important;
}

.byted-weektime .calendar .calendar-table .td-table-tip .clearfix {
  height: 46px;
  line-height: 46px;
}

.byted-weektime .calendar .calendar-table .td-table-tip .pull-left {
  font-size: 14px;
  color: #333333;
}

.byted-weektime .week-td {
  width: 75px;
  padding: 20px 0;
}

.byted-weektime a {
  cursor: pointer;
  color: #2f88ff;
  font-size: 14px;
}

#kuang {
  position: absolute;
  background-color: blue;
  opacity: 0.3;
}

.timeContent {
  text-align: left !important;
}
</style>
